<template>
  <div class="service-silhouette">
    <el-carousel direction="horizontal" :autoplay="true" indicator-position="none" arrow="never" :loop="true"
                 :interval="5000">
      <el-carousel-item v-for="item in images">
        <img alt="" :src="'https://police-station-1306862033.cos.ap-chengdu.myqcloud.com/guangchang/jianying/'+url"
             v-for="url in item" class="image-item">
      </el-carousel-item>
    </el-carousel>
  </div>
</template>
<script>
export default {
  name: "ServiceSilhouette",
  data() {
    return {
      images: [
        [
          '35.JPG', '36.JPG', '37.JPG',
        ],
        [
          '39.JPG', '4.JPG', '43.JPG',
        ],
        [
          '44.JPG', '45.JPG', '46.JPG',
        ],
        [
          '48.JPG', '6.JPG', '7.JPG',
        ],
      ]
    }
  }
}
</script>
<style lang="scss">
.service-silhouette {
  .el-carousel {
    width: 100%;
    height: 100%;

    .el-carousel__container {
      width: 100%;
      height: 100%;

      .el-carousel__item {
        display: flex;
        justify-content: space-between;
        align-items: center;
        background: url("~@/assets/images/silhouette.png") no-repeat center;
        background-size: 100% 100%;
        padding: 32px 12px;
        .image-item {
          width: calc(100% / 3 - 7px);
          height: 100%;
        }
      }
    }
  }
}
</style>
<style scoped lang="scss">
.service-silhouette {
  width: 100%;
  height: 100%;
}
</style>
